<template>
  <div class="password">
    <!-- 导航栏 -->
    <van-nav-bar
      title="注销账号"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <div class="main">
      <van-field v-model="mailbox" label="邮箱" placeholder="请填写邮箱账号" />

      <van-field
        v-model="sms"
        center
        clearable
        label="邮箱验证码"
        placeholder="请输入邮箱验证码"
      >
        <template #button>
          <van-button
            v-show="show"
            size="small"
            type="primary"
            @click="getemailValidCode"
          >
            发送验证码
          </van-button>

          <van-button v-show="!show" size="small" type="primary">
            {{ count }}秒后重新发送
          </van-button>
        </template>
      </van-field>

      <div style="margin: 16px">
        <van-button round block type="info" @click="getcheckValidCode"
          >确认注销</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Account",

  data() {
    return {
      mailbox: "",
      sms: "",
      count: "",
      timer: null,
      show: true,
    };
  },

  methods: {
    // 返回
    onClickLeft() {
      this.$router.push({ name: "Setup" });
    },

    //获取注销账号接口
    getdestroyAccount() {
      this.axios({
        method: "post",
        url: "/destroyAccount",
      })
        .then((res) => {
          this.$toast(res.data.msg);

          setTimeout(() => {
            if (res.data.code === "G001") {
              sessionStorage.clear();
              this.$router.push({ name: "Order" });
            }
          }, 2000);

          setTimeout(() => {
            this.$toast("请重新登录");
          }, 3000);
        })
        .catch((err) => {});
    },

    //获取邮箱验证
    getemailValidCode() {
      this.axios({
        method: "post",
        url: "/emailValidCode",
        data: {
          email: this.mailbox,
        },
      })
        .then((res) => {
          //

          this.$toast(res.data.msg);

          let time_count = 60;
          if (!this.timer) {
            this.count = time_count;
            this.show = false;
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= time_count) {
                this.count--;
              } else {
                this.show = true;
                clearInterval(this.timer);
                this.timer = null;
              }
            }, 1000);
          }
        })
        .catch((err) => {});
    },

    //验证码验证接口
    getcheckValidCode() {
      this.axios({
        method: "post",
        url: "/checkValidCode",
        data: {
          validCode: this.sms,
        },
      })
        .then((res) => {
          //

          this.$toast(res.data.msg);

          setTimeout(() => {
            if (res.data.code === "K001") {
              this.getdestroyAccount();
            }
          }, 3200);
        })
        .catch((err) => {});
    },
  },
};
</script>

<style lang="less" scoped>
// 导航栏
/deep/.van-nav-bar {
  position: fixed;
  width: 100%;
  top: 0;
  height: 40px;
}

/deep/.van-nav-bar__title {
  color: #37343b;
  font-weight: 600;
}

/deep/.van-nav-bar__text {
  color: #37343b;
  font-weight: 600;
}

/deep/.van-nav-bar .van-icon {
  color: #37343b;
}

.main {
  width: 100%;
  position: absolute;
  top: 40px;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
}

/deep/.van-button--info {
  background-color: #37343b;
  border-color: #37343b;
}

.van-button--primary {
  background-color: #615c69;
  border-color: #686074;
}
</style>